﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   
    
    <!--Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css" />

    <!--Functions-->
     <script type="text/javascript" src="js/numbersToCurrency.js"></script>
     <script type="text/javascript" src="js/GraphFunctions.js"></script>
     <script type="text/javascript" src="js/getJson.js"></script>
     <script type="text/javascript" src="js/Images.js"></script>
     <script type="text/javascript" src="js/LaunchPage.js"></script>
     <script type="text/javascript" src="js/DisplayHome.js"></script>
     <script type="text/javascript" src="js/DisplayDetails.js"></script>


    <!--jQuery Mobile-->
    <script type="text/javascript" src="js/jQueryMobile/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/jQueryMobile/jquery.mobile-1.2.0.min.js"></script>

    <!--Cordova-->
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="cordova-2.3.0.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
        $.mobile.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
    </script>

    <!--Azure Mobile Service-->
     <script type="text/javascript" src="http://kpiapp.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script>

    <!--jqplot charts-->
    <link class="include" rel="stylesheet" type="text/css" href="js/jqPlot/jquery.jqplot.min.css" />
    <script class="include" type="text/javascript" src="js/jqPlot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="js/jqPlot/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqPlot/jqplot.canvasAxisLabelRenderer.min.js"></script>

    <title>JQuery Mobile KPI App - David Kernan</title>
</head>

<!--Call initialisation function after body loads -->
<body onload="LaunchPage(0);">

    <!-- container for index page here-->
    <div data-role="page" id="index" data-theme="c" data-add-back-btn="true">
        <header data-role="header" id="indexheader" data-position="fixed">
            <!--Settings button-->
            <a href="#settings" data-icon="gear" class="ui-btn-right">Settings</a>
            <h1>KPI App</h1>
        </header>
        <div data-role="content">
            <!-- DisplayData.js takes control based on id="kpi" in div tag. populates list formatted for jQuery-->
            <ul id="kpi" data-role="listview">
            </ul>
        </div>
    </div>

    <!-- container for details page here-->
    <div data-role="page" data-theme="c" id="details" data-add-back-btn="true">
        <header id="detailsheader" data-role="header" data-position="fixed">
            <a href="#settings" data-icon="gear" class="ui-btn-right" >Settings</a>
            <h1>KPI App</h1>
        </header>
        <div data-role="content">
            <!-- DisplayData.js takes control based on id="detailList" in div tag. populates list formatted for jQuery-->
            <ul id="detailList" data-role="listview">
            </ul>
        </div>
        <!-- Buttons to show/hide graph-->
        <a href="#" data-role="button" data-inline="true" data-mini="true" onclick="Graph(0);">
            View Graph</a> <a href="#" data-rel="popup" data-role="button" data-inline="true" data-mini="true"
                onclick="Graph(1);" data-add-back-btn="true">Hide Graph</a>
        <div id="chart1">
        </div>
    </div>

    <!-- container for settings page here-->
    <div data-role="popup" data-theme="c" id="settings" data-add-back-btn="true">
        <header id="settingsheader" data-role="header" data-position="fixed">
            <a href="#settings" data-icon="gear" class="ui-btn-right">Settings</a>
            <h1>KPI App</h1>
        </header>
        <div data-role="content">
        </div>
    </div>
</body>
 <script type="text/javascript" src="js/Settings.js"></script>
</html>
